<template>
    <div class="container">
        <div class="top">
            <div>
            </div>
            <el-button type="primary" plain @click="add">新增</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" v-loading="loading" height="calc(100% - 20px)">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="typeLabel" label="预案名称"> </el-table-column>
            <el-table-column prop="createTime" label="创建日期"> </el-table-column>
            <el-table-column label="现场处置方案">
                <template #default="scope">
                    <el-button type="primary" plain @click="details(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作">
                <template #default="scope">
                    <el-icon title="编辑" @click="edit(scope.row)">
                        <Edit />
                    </el-icon>
                    &nbsp;
                    <el-icon title="删除" @click="del(scope.row)">
                        <Delete />
                    </el-icon>
                </template> </el-table-column>
        </el-table>

        <!-- 编辑对话框 -->
        <el-dialog title="联防单位管理" v-model="open" width="500px" append-to-body>
            <el-form ref="postRef" :model="form" :rules="rules" label-width="auto">
                <el-form-item label="预案名称" prop="type">
                    <el-select
                        v-model="form.type"
                        placeholder="请选择"
                        clearable
                        >
                        <el-option
                            v-for="item in options"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                        />
                        </el-select>
                </el-form-item>
            </el-form>
            <el-upload ref="uploadRef" style="margin-left: 15%;" v-model:file-list="fileList" accept=".pdf" :limit="1"
                :http-request="httpRequest">
                <template #trigger>
                    <el-button type="primary">上传</el-button>
                </template>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传pdf格式文件
                    </div>
                </template>
            </el-upload>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 查看文件 -->
        <el-dialog title="查看" v-model="show" append-to-body width="80vw">
            <embed name="showName" :src="showUrl" style="overflow: auto; width: 100%; height: 70vh;" hidden="true">
        </el-dialog>
    </div>
</template>

<script setup>
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    import {
        getDamage,
        delDamage,
        addDamage,
        editDamage,
        uploadFile,
        getFlood
    } from "@/api/work";
    const {
        proxy
    } = getCurrentInstance();
    const open = ref(false)

    const tableData = ref([])
    const loading = ref(true);
    const options = ref([]);

    function getType (){
        getFlood().then(res=>{
            options.value = res.data
        })
    }
    getType()
    function getList() {
        loading.value = true
        getDamage().then(res => {
            loading.value = false
            tableData.value = res.rows
        })
    }
    getList()


    function add() {
        open.value = true
        form.value = {}
        fileList.value = []
    }

    function edit(row) {
        fileList.value = []
        row.type = row.type +''
        form.value = row
        if (form.value.fileName && form.value.fileUrl) {
            fileList.value = [{
                name: form.value.fileName,
                url: form.value.fileUrl
            }]
        }
        open.value = true
    }

    const show = ref(false)
    const showUrl = ref('')
    const showName = ref('')

    function details(row) {
        show.value = true
        showUrl.value = row.fileUrl
        showName.value = row.name
    }

    const fileList = ref([])

    function httpRequest(date) {
        console.log(date)
        let file = date.file
        if (/\.pdf/.test(file.name)) {
            const formData = new FormData()
            formData.append('file', file)
            uploadFile(formData).then(res => {
                if (res.code = 200) {
                    ElMessage({
                        type: 'success',
                        message: '上传成功',
                    })
                    form.value.fileName = res.data.name
                    form.value.fileUrl = res.data.url
                }
            })
        } else {
            fileList.value = []
            return ElMessage({
                type: 'error',
                message: '只能上传pdf格式的文件',
            })
        }
    }

    function del(data) {
        ElMessageBox.confirm(
                '确认删除吗？',
                'Warning', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                delDamage(data.id).then(res => {
                    ElMessage({
                        type: 'success',
                        message: '已删除',
                    })
                    getList()
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }

    function cancel() {
        open.value = false
    }

    function submitForm() {
        console.log(fileList.value)
        if (fileList.value.length == 0) {
            form.value.fileName = ''
            form.value.fileUrl = ''
        }
        proxy.$refs["postRef"].validate(valid => {
            if (valid) {
                if (form.value.id != undefined) {
                    editDamage(form.value).then(response => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList()
                    });
                } else {
                    addDamage(form.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList()
                    });
                }
            }
        });
    }

    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            postCode: undefined,
            postName: undefined,
            phone: undefined
        },
        rules: {
            leaderPhone: [{
                pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur'
            }],
            assistantPhone: [{
                pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur'
            }],
        }
    });
    const {
        queryParams,
        form,
        rules
    } = toRefs(data);
</script>

<style lang='scss' scoped>
    .container {
        height: 100%;
        width: 100%;
        padding: 20px;
    }

    .top {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
    }

    .end {
        justify-content: flex-end;
    }

    :deep(.el-table .el-table__cell) {
        text-align: center;
    }
    :deep(.el-table--border::before) {
    width: 0px;;
  }
  :deep(.el-table--border::after) {
    width: 0px;;
  }
</style>